body {
    background-color: black;
    font-family: Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    opacity: 0.9;
    margin-top: 0px;
    text-align: center;
}

/*Navigation bar*/

.navigation-bar {
    width: 100%;
    height: 69px;
    border-bottom: 1px solid seashell;
    position: fixed;
    z-index: 99;
    background-color: black;
}

.navigation-bar .logo {
    float: left;
    height: 50px;
    padding-left: 10px;
    margin-top: 10px;
}

.navigation-bar ul {
    float: right;
    display: inline-flex;
    margin-right: 22px;
}

.navigation-bar li {
    list-style-type: none;
    text-decoration: underline;
    padding-left: 15px;
}

.navigation-bar a {
    color: seashell;
}

@media only screen and (max-width: 573px) {
    .navigation-bar li {
        font-size: 15px;
    }
}

@media only screen and (max-width: 477px) {
    .navigation-bar ul {
        display: none;
    }
}

/*Mission section*/

#mission img {
    width: 100%;
}

#mission .text {
    background-color: black;
    position: relative;
    bottom: 500px;
    padding: 1px 0px;
}

@media only screen and (max-width: 1199px) {
    #mission .text {
        position: initial;
    }
}

/*Featured Tea section*/

#featured-tea .container {
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    justify-content: space-around;
    padding-top: 30px;
}

#featured-tea .container-2 {
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    justify-content: space-evenly
}

#featured-tea .item {
    width: 300px;
}

#featured-tea img {
    width: 100%;
}

/*Locations section*/

#locations .container {
    height: 500px;
    width: 80%;
}

#locations img {
    width: 100%;
}

#locations .container-2 {
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    position: relative;
    bottom: 500px;
    padding: 0px 100px;
}

#locations .block {
    background-color: black;
    width: 300px;
    height: 350px;
    margin-left: 40px;
}

@media only screen and (max-width: 1000px) {
    #locations .container-2 {
        position: initial;
        margin: auto;
    }
    #locations .block {
        margin: 0px;
        height: 250px;
    }
}

aside {
    position: relative;
    top: 250px;
}

footer {
    position: relative;
    top: 250px;
    text-align: left;
}

@media only screen and (max-width: 1000px) {
    aside, footer {
        position: relative;
        top: 550px;
    }
}